<template>
  <div class="mobile-container">
    <div class="mobile-header">
      <IndexHeader
        :cityOptions="cityOptions"
        :navOptions="navOptions"
        :cityName="mobileCityInfo.cityName"
        screenName="移动端大屏"
        :mapList="mapList" @cityChange="cityChange">
      </IndexHeader>
    </div>
    <div class="mobile-content">
      <div class="mobile-item mobile-item-left">
        <item-left></item-left>
      </div>
      <div class="mobile-item mobile-item-middle">
        <item-middle></item-middle>
      </div>
      <div class="mobile-item mobile-item-right">
        <item-right></item-right>
      </div>
    </div>
  </div>
</template>

<script>
  import ItemLeft from './Left/index'
  import ItemMiddle from './Middle/index'
  import ItemRight from './Right/index'
  import io from 'socket.io-client'
  import { mapState, mapMutations} from 'vuex'
  import { IndexHeader } from '../common'
  const { cityOptions, navOptions, mapLists } = global.dataConfig

  const mobileSocket = io.connect('http://47.98.17.80:9005/')
//  const mobileSocket = io.connect('http://127.0.0.1:9005/')

  export default {
    components: {IndexHeader, ItemLeft, ItemMiddle, ItemRight},
    data () {
      return {
        mapList: mapLists['Mobile'],
      }
    },
    computed: {
      ...mapState(['mobileCityInfo']),
      cityOptions () { return cityOptions },
      navOptions () { return navOptions }
    },
    mounted () {
      this.onReady()
    },
    methods: {
      ...mapMutations([
        'MOBILE_CITY_INFO',
        'MOBILE_PAY_MOUNT',
        'MOBILE_PAY_COUNT',
        'MOBILE_CARD_COUNT',
        'INTERVAL_TOTAL',
        'MOBILE_MAP',
        'DEVICE_DATA',
        'SEX_DATA',
        'AREA_DATA',
        'AGE_DATA',
        'AVERAGE_PAY',
        'AVERAGE_PAY_PIE',
        'BUS_AVERAGE_PAY',
        'CITY_PAY',
        'CITY_MONTH_PAY'
      ]),
      onReady () {
        let that = this
        mobileSocket.emit('join', {cityCode: this.mobileCityInfo.cityCode})
        mobileSocket.on('mobileData', function (data) {
          console.log('mobile-data' + data)
          let newData = JSON.parse(data)
          that.MOBILE_PAY_MOUNT(JSON.parse(newData.mobilePayMount))
          that.MOBILE_PAY_COUNT(JSON.parse(newData.mobilePayCount))
          that.MOBILE_CARD_COUNT(JSON.parse(newData.mobileCardCount))
//          that.INTERVAL_TOTAL(JSON.parse(newData.intervalTotal))
          that.MOBILE_MAP(JSON.parse(newData.mapData))
          that.DEVICE_DATA(JSON.parse(newData.deviceData))
          that.SEX_DATA(JSON.parse(newData.sexData))
          that.AREA_DATA(JSON.parse(newData.areaData))
          that.AGE_DATA(JSON.parse(newData.ageData))
          that.AVERAGE_PAY(JSON.parse(newData.averagePay))
          that.AVERAGE_PAY_PIE(JSON.parse(newData.averagePayPie))
          that.BUS_AVERAGE_PAY(JSON.parse(newData.busAveragePay))
          that.CITY_PAY(JSON.parse(newData.cityPay))
          that.CITY_MONTH_PAY(JSON.parse(newData.cityMonthPay))
        })
      },
      cityChange (item) {
        this.MOBILE_CITY_INFO({ item: 'cityName', data: item.label })
        this.MOBILE_CITY_INFO({ item: 'cityCode', data: item.code })
        this.MOBILE_CITY_INFO({ item: 'center', data: item.center })
        mobileSocket.emit('cityChange', {cityCode: item.code})
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '../../assets/css/mobile.styl';
</style>
